<template>
  <div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">我的申请</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button type="text">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="审批人">
        <el-input
          v-model="formInline.user"
          placeholder="审批人"
        ></el-input>
      </el-form-item>
      <el-form-item label="申请状态">
        <el-select
          v-model="formInline.region"
          placeholder="申请状态"
        >
          <el-option
            label="通过"
            value="a"
          ></el-option>
          <el-option
            label="未通过"
            value="e"
          ></el-option>
          <el-option
            label="过期"
            value="p"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="aprovals"
      height="590"
    >
      <el-table-column
        prop="approvalId"
        label="审批编号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        label="审批内容"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="receiveName"
        label="审批人"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="senderName"
        label="申请人"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="申请状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag size="medium">{{ handleStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="applyTime"
        label="申请时间"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="approvalTime"
        label="审批时间"
        width="170"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            @click="showInfo(scope.row)"
            type="text"
            size="small"
          >详情</el-button>
          <el-button
            type="text"
            size="small"
          >再次申请</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
    >
    </el-pagination>
    <el-dialog
      title="审批详情"
      :visible.sync="isShowInfo"
      width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowInfo = false">取 消</el-button>
        <el-button type="primary" @click="isShowInfo = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowInfo: false,
      aprovals: [
        {
          approvalId: "23892839",
          content: "加入部门",
          receiveId: "123",
          receiveName: "zhangsan",
          senderId: "1245",
          senderName: "wangwu",
          status: "a",
          applyTime: "2022-10-01 09:00:23",
          approvalTime: "2022-10-02 10:11:00",
        },
        {
          approvalId: "23892839",
          content: "加入部门",
          receiveId: "123",
          receiveName: "zhangsan",
          senderId: "1245",
          senderName: "wangwu",
          status: "a",
          applyTime: "2022-10-01 09:00:23",
          approvalTime: "2022-10-02 10:11:00",
        },
        {
          approvalId: "23892839",
          content: "加入部门",
          receiveId: "123",
          receiveName: "zhangsan",
          senderId: "1245",
          senderName: "wangwu",
          status: "a",
          applyTime: "2022-10-01 09:00:23",
          approvalTime: "2022-10-02 10:11:00",
        },
      ],
       formInline: {
          user: '',
          region: ''
        }
    }
  },
  methods: {
    handleStatus(status) {
      var str = "";
      if (status == "a") {
        str = "通过";
      } else if (status == "p") {
        str = "申请超时";
      } else {
        str = "未通过";
      }
      return str;
    },
    onSubmit() {
        console.log('submit!');
    },
    showInfo(row) {
      this.isShowInfo = true
    }
  },
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>